﻿<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />

</head>
<body>
	<!--根据数据渲染多级联动-->
	<div id="category">
		
	</div>
	
	<script type="text/javascript">
		var categories=[
		{"id":10,"name":'男装',"children":[
			{"id":101,"name":'正装'},
			{"id":102,"name":'T恤'},
			{"id":103,"name":'裤衩'}
		]},
		{"id":20,"name":'女装',"children":[
			{"id":201,"name":'短裙'},
			{"id":202,"name":'连衣裙'},
			{"id":203,"name":'裤子',"children":[
				{"id":2031,"name":'长裤'},
				{"id":2031,"name":'九分裤'},
				{"id":2031,"name":'七分裤'}
			]},
		]},
		{"id":30,"name":'童装',"children":[
			{"id":301,"name":'帽子'},
			{"id":302,"name":'套装',"children":[
				{"id":3021,"name":"0-3岁"},
				{"id":3021,"name":"3-6岁","children":[
					{"id":2031,"name":'长裤'},
					{"id":2031,"name":'九分裤'},
					{"id":2031,"name":'七分裤',"children":[
						{"id":101,"name":'正装'},
						{"id":102,"name":'T恤'},
						{"id":103,"name":'裤衩'}
					]}
				]},
				{"id":3021,"name":"6-9岁"},
				{"id":3021,"name":"9-12岁"}
			]},
			{"id":303,"name":'手套'}
		]}
	];
	
		function createSelect(arr){
			console.log(arr);
			var sel=document.createElement("select");
			sel.add(new Option("-请选择-",-100));
			
//			arr.forEach(val=>{
//				sel.add(new Option(val.name,val.id));
//			})
//			
//			sel.onchange=function(){
//				while(this.parentNode.lastElementChild!=this){
//					this.parentNode.lastElementChild.remove();
//				}
//				
//				var i=this.selectedIndex;
//				if(i>0){
//					if(arr[i-1].children){
//						createSelect(arr[i-1].children)
//					}
//				}
//			}
			category.appendChild(sel);
		
		}
		createSelect(categories);
	</script>
</body>
</html>
